import axios from "axios";
import type {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from "axios";
import { ElLoading, ElMessage } from "element-plus";
import type {
  CustomOptionsProps,
  // ResponseProps,
  // MyResponseProps,
} from "./type";
// import qs from "qs";

// headers: {
//   'Content-Type': 'application/x-www-form-urlencoded'
// Content-Type: application/json
// Content-Type: multipart/form-data
// },
// 通过qs来序列化参数
// transformRequest: [
//   (data) => {
//     return qs.stringify(data)
//   }
// ],

// 用于解决重复请求，只要请求地址、请求方式、请求参数一样，就是重复的，选择 Map 对象来操作
const pendingMap = new Map();

// 同一时间内发起多个请求，我们只需要展示一个Loading层即可，不需要产生多个造成重复展示
// 同一时间内发起多个请求展示的Loading层以最后一个请求响应而关闭销毁
type LoadingInstanceProps = {
  _target: any;
  _count: number;
};
const LoadingInstance: LoadingInstanceProps = {
  _target: null, // 保存 Loading 实例
  _count: 0,
};

// 第一个参数传递的是axios原本的一些配置，第二个参数就是我们自己的一些自定义参数了
function myAxios(
  axiosConfig: AxiosRequestConfig,
  customOptions?: CustomOptionsProps
) {
  const instance: AxiosInstance = axios.create({
    baseURL: window.BASE_API, // 设置统一的请求前缀
    timeout: 6000, // 设置统一的超时时长
    paramsSerializer: {
      indexes: null, // 设置数组格式为 evelArrayId=3&levelArrayId=4
    },
  });

  // 自定义配置
  const custom_options: CustomOptionsProps = Object.assign(
    {
      repeat_request_cancel: true, // 是否开启取消重复请求, 默认为 true
      loading: true, // 是否开启 loading 层效果, 默认为 true
    },
    customOptions
  );

  instance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      // config.headers!.Authorization = "getTokenAUTH()";

      removePending(config);
      custom_options.repeat_request_cancel && addPending(config);

      // 创建 loading 实例
      if (custom_options.loading) {
        LoadingInstance._count++;
        if (LoadingInstance._count === 1) {
          LoadingInstance._target = ElLoading.service();
        }
      }

      return config;
    },
    (error: AxiosError) => {
      return Promise.reject(error);
    }
  );

  instance.interceptors.response.use(
    (response: AxiosResponse) => {
      removePending(response.config);
      custom_options.loading && closeLoading(custom_options); // 关闭loading
      return response;
    },
    (error: AxiosError) => {
      error.config && removePending(error.config);

      custom_options.loading && closeLoading(custom_options); // 关闭loading

      httpErrorStatusHandle(error); // 处理错误状态码

      return Promise.reject(error);
    }
  );

  return instance(axiosConfig);
}

// 生成每个请求唯一的键
function getPendingKey(config: AxiosRequestConfig) {
  const { url, method, params } = config;
  let { data } = config;
  if (typeof data === "string") data = JSON.parse(data); // response 里面返回的 config.data 是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join("&");
}

// 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求
function addPending(config: AxiosRequestConfig) {
  const pendingKey = getPendingKey(config);
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken((cancel) => {
      if (!pendingMap.has(pendingKey)) {
        pendingMap.set(pendingKey, cancel);
      }
    });
}

// 删除重复的请求
function removePending(config: AxiosRequestConfig) {
  const pendingKey = getPendingKey(config);
  if (pendingMap.has(pendingKey)) {
    const cancelToken = pendingMap.get(pendingKey);
    cancelToken(pendingKey);
    pendingMap.delete(pendingKey);
  }
}

// 关闭 Loading 层实例
function closeLoading(_options: CustomOptionsProps) {
  if (_options.loading && LoadingInstance._count > 0) LoadingInstance._count--;
  if (LoadingInstance._count === 0) {
    LoadingInstance._target!.close();
    LoadingInstance._target = null;
  }
}

// 错误异常处理
function httpErrorStatusHandle(error: any) {
  // 处理被取消的请求
  if (axios.isCancel(error))
    return console.error("请求的重复请求：" + error.message);
  let message = "";
  if (error && error.response) {
    switch (error.response.status) {
      case 302:
        message = "接口重定向了！";
        break;
      case 400:
        message = "参数不正确！";
        break;
      case 401:
        message = "您未登录，或者登录已经超时，请先登录！";
        break;
      case 403:
        message = "您没有权限操作！";
        break;
      case 404:
        message = `请求地址出错: ${error.response.config.url}`;
        break; // 在正确域名下
      case 408:
        message = "请求超时！";
        break;
      case 409:
        message = "系统已存在相同数据！";
        break;
      case 500:
        message = "服务器内部错误！";
        break;
      case 501:
        message = "服务未实现！";
        break;
      case 502:
        message = "网关错误！";
        break;
      case 503:
        message = "服务不可用！";
        break;
      case 504:
        message = "服务暂时无法访问，请稍后再试！";
        break;
      case 505:
        message = "HTTP版本不受支持！";
        break;
      default:
        message = "异常问题，请联系管理员！";
        break;
    }
  }
  if (error.message.includes("timeout")) message = "网络请求超时！";
  if (error.message.includes("Network"))
    message = window.navigator.onLine ? "服务端异常！" : "您断网了！";

  ElMessage({
    type: "error",
    message,
  });
}

export default myAxios;

// 调用
// myAxios({
//   url: '/api/list',
//   method: 'get',
//   params: {}
// }, {
//   loading: true
// })
